<template>
  <a-flex vertical gap="middle" class="container">
    <a-flex gap="small" :align="'center'">
      <a-button
        type="primary"
        :style="btnStyle('#13c2c2', '#5cdbd3')"
        shape="circle"
        :icon="h(ArrowLeftOutlined)"
        @click="goBack"
      />
      <a-typography-title :level="4" style="margin: 0">
        {{ task?.name }}
      </a-typography-title>
    </a-flex>
    <template v-if="task">
      <a-flex vertical gap="small">
        <a-descriptions :column="4">
          <a-descriptions-item label="任务类型">
            {{ task.category }}
          </a-descriptions-item>
          <a-descriptions-item label="任务状态">
            <a-tag :color="tag?.color" :bordered="false">
              {{ tag?.content }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="下载目录">
            {{ task.dir }}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ dayjs(task.created_at).format("YYYY-MM-DD HH:mm:ss") }}
          </a-descriptions-item>
          <a-descriptions-item label="连接数">
            {{ task.connections }}
          </a-descriptions-item>
          <a-descriptions-item label="下载速度">
            {{ speed }}
          </a-descriptions-item>
          <a-descriptions-item label="总大小">
            {{ totalLength }}
          </a-descriptions-item>
          <a-descriptions-item label="已下载">
            {{ completedLength }}
          </a-descriptions-item>
        </a-descriptions>
        <span>下载文件：</span>
        <a-table
          rowKey="index"
          :pagination="false"
          :columns="columns"
          :data-source="data"
          :scroll="{ y: 570 }"
          :row-selection="rowSelection"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'path'">
              <TaskFile :file="record" />
            </template>
          </template>
        </a-table>
        <a-flex justify="flex-end">
          <a-button type="primary" @click="onSelectFile">
            变更选择的文件
          </a-button>
        </a-flex>
      </a-flex>
    </template>
    <NotFound v-else />
  </a-flex>
</template>

<script setup lang="ts">
import {
  btnStyle,
  getReadableSize,
  getSpeed,
  getTaskTag,
} from "@/components/task";
import { useApisStore, type File } from "@/stores/apis";
import { App, type TableProps } from "ant-design-vue";
import { computed, h, ref } from "vue";
import { useRouter } from "vue-router";
import NotFound from "./NotFoundView.vue";
import { ArrowLeftOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
import TaskFile from "@/components/TaskFile.vue";

type Key = string | number;

const props = defineProps<{ id: string }>();
const router = useRouter();
const apis = useApisStore();
const { message } = App.useApp();
const task = computed(() => {
  const id = Number(props.id);
  const t = apis.tasks.find((item) => item.id == id);
  if (t) {
    data.value = t.files;
    if (selectedKeys.value.length == 0) {
      selectedKeys.value = t.files
        .filter((item) => item.selected)
        .map((item) => item.index);
      rowSelection!.defaultSelectedRowKeys = selectedKeys.value;
    }
  }
  return t;
});
const tag = computed(() => {
  if (task.value) {
    return getTaskTag(task.value.status);
  }
});
const speed = computed(() => {
  if (task.value) {
    return getSpeed(task.value);
  }
});
const totalLength = computed(() => {
  if (task.value) {
    return getReadableSize(task.value.total_length);
  }
});
const completedLength = computed(() => {
  if (task.value) {
    return getReadableSize(task.value.completed_length);
  }
});
const data = ref<File[]>([]);
const selectedKeys = ref<Key[]>([]);
const columns = [
  {
    title: "Index",
    dataIndex: "index",
    key: "index",
    align: "center",
    width: 80,
  },
  {
    title: "文件",
    dataIndex: "path",
    key: "path",
    align: "center",
  },
];
const rowSelection: TableProps["rowSelection"] = {
  selections: true,
  onChange(selectedRowKeys) {
    selectedKeys.value = selectedRowKeys;
  },
};

function goBack() {
  router.back();
}

function onSelectFile() {
  if (task.value) {
    apis
      .selectFile({
        gid: task.value.gid,
        select_file: selectedKeys.value.join(","),
      })
      .then((data) => message.success(data))
      .catch((error) => message.error(error));
  }
}
</script>

<style scoped>
.container {
  width: 960px;
  margin-top: 16px;
  margin-left: 240px;
}
</style>
